<template>
  <Layout>
    <!-- <div id="ad" ref="ad" v-if="ad.display">
        <a v-bind:href="ad.url">
            <img :src="ad.image"/>
        <span class="ivu-icon ivu-icon-ios-close-outline" @click="closeAd()"></span>
        </a>
    </div>-->
    <mheader></mheader>
    <div>
      <mnavi></mnavi>
      <Row type="flex" justify="start">
        <!-- BD -->
        <Col span="16" offset="4">
        <mcarousel></mcarousel>
        </Col>
      </Row>
      <Row type="flex" justify="start">
        <Col span="16" offset="4">
        <!--<Row>
          hot
          <Tabs value="name1">
            <TabPane label="标签一" name="name1">
              <ul>
                <li v-for="item in items" style="float:left;">
                  <mbox :item="item"></mbox>
                </li>
              </ul>
            </TabPane>
            <TabPane label="标签二" name="name2">标签二的内容</TabPane>
            <TabPane label="标签三" name="name3">
              <ul>
                <li v-for="item in items" style="float:left;">
                  <mbox :item="item"></mbox>
                </li>
              </ul>
            </TabPane>
            <Button type="ghost" @click="handleMore()" size="small" slot="extra">More</Button>
          </Tabs>
        </Row>-->

        <Row class="section">
          <div class="section-header">
            <div class="section-name">演唱会</div>
            <div class="section-operation">
              <a>查看更多
                <Icon type="chevron-right"></Icon>
              </a>
            </div>
          </div>
          <div class="section-content">
            <div class="section-show">
              <mbig v-if="concerts[0]" :item="concerts[0]"></mbig>
            </div>
            <div class="section-list">
              <ul>
                <li class="section-list-item" v-for="(item, i) in concerts">
                  <mbox v-if="i > 0" :item="item"></mbox>
                </li>
              </ul>
            </div>
          </div>
        </Row>

          <Row class="section">
          <div class="section-header">
            <div class="section-name">音乐会</div>
            <div class="section-operation">
              <a>查看更多
                <Icon type="chevron-right"></Icon>
              </a>
            </div>
          </div>
            <div class="section-content">
              <div class="section-show">
                <mbig v-if="musics[0]" :item="musics[0]"></mbig>
              </div>
              <div class="section-list">
                <ul>
                  <li class="section-list-item" v-for="(item, i) in musics">
                    <mbox v-if="i > 0" :item="item"></mbox>
                  </li>
                </ul>
              </div>
            </div>
        </Row>
        <Row class="section">
          <div class="section-header">
            <div class="section-name">儿童亲子</div>
            <div class="section-operation">
              <a>查看更多
                <Icon type="chevron-right"></Icon>
              </a>
            </div>
          </div>
          <div class="section-content">
            <div class="section-show">
              <mbig v-if="family[0]" :item="family[0]"></mbig>
            </div>
            <div class="section-list">
              <ul>
                <li class="section-list-item" v-for="(item, i) in family">
                  <mbox v-if="i > 0" :item="item"></mbox>
                </li>
              </ul>
            </div>
          </div>
        </Row>

        <Row class="section">
          <div class="section-header">
            <div class="section-name">戏剧</div>
            <div class="section-operation">
              <a>查看更多
                <Icon type="chevron-right"></Icon>
              </a>
            </div>
          </div>
          <div class="section-content">
            <div class="section-show">
              <mbig v-if="xiju[0]" :item="xiju[0]"></mbig>
            </div>
            <div class="section-list">
              <ul>
                <li class="section-list-item" v-for="(item, i) in xiju">
                  <mbox v-if="i > 0" :item="item"></mbox>
                </li>
              </ul>
            </div>
          </div>
        </Row>
        </Col>
      </Row>
    </div>
    <mfooter></mfooter>

  </Layout>
</template>

<script>
  import mbox from "@/components/mbox";
  import mbig from "@/components/mbig";
  import mnavi from "@/components/mnavi";
  import mcarousel from "@/components/mcarousel";
  import mheader from "@/components/mheader";
  import mfooter from "@/components/mfooter";

  export default {
    name: "Index",
    components: {
      mbox,
      mbig,
      mnavi,
      mcarousel,
      mheader,
      mfooter
    },
    methods: {
      handleMore() {
        console.log("error");
      },
      loadConcert(type, recieve) {
        this.$axios({
          method: 'get',
          url: '/api/concert',
          params: {
            type: type,
            page: this.page,
            limit: this.limit,
            init: 1,
          }
        }).then((res) => {
          switch (type) {
            case 0: this.concerts = res.data.result;break;
            case 1: this.musics = res.data.result;break;
            case 2: this.family = res.data.result;break;
            case 3: this.xiju = res.data.result;break;
          }
        }).catch((error) => {
          console.log(error);
        });
      },
      loadPoster(imageId) {
        return new Promise(function (resolve, reject) {
          this.$axios({
            method: 'get',
            url: `/api/image/${this.item.poster}`,
          }).then(res => {
            if (res.data) {
              resolve(res.data);
            }
          })
        });
      },
      closeAd() {
        this.ad.display = false;
      }
    },
    data() {
      return {
        page: 0,
        limit: 6,
        concerts: [],
        musics: [],
        family: [],
        xiju: [],
        ad: {
          display: true,
          url: "http://www.baidu.com",
          image:
            "https://img12.360buyimg.com/da/jfs/t19027/278/1019945631/36765/53fa976f/5ab85151Nee73c172.jpg"
        },
        items: [
          {
            image: "https://img1.tking.cn/assets/img/DGXSX7b2j6.jpg",
            title: "琴弦上的对白——德国莱比锡弦乐四重奏成立30周年纪念巡演",
            id: "123123123",
            time: "2018.05.20 20:00",
            place: "珠海华发中演大剧院-音乐厅",
            rate: 5.5,
            price: 100
          }
        ]
      };
    },
    beforeMount() {
      this.loadConcert(0);
      this.loadConcert(1);
      this.loadConcert(2);
      this.loadConcert(3);
    },
    created() {

    }
  };
</script>

<style scoped>
  .ivu-layout {
    background: #fff;
  }

  .active a {
    color: #f2593f;
  }

  .active a .border-bottom,
  .navi .navi-item a:hover .border-bottom {
    display: block;
  }

  .navi-item {
    float: left;
    margin: 20px 40px;
  }

  .navi {
    font-size: 1.4rem;
    margin-top: 20px;
  }

  a .border-bottom {
    display: none;
    position: relative;
    top: 0;
    height: 4px;
    width: 100%;
    background-color: #f2593f;
    border-radius: 2px;
  }

  .section {
    margin-top: 20px;
  }

  .section-header {
    margin: 20px 0;
  }

  .section-name {
    font-size: 1.6rem;
    display: inline-block;
    font-weight: bold;
    color: #000;
  }

  .section-operation {
    font-size: 14px;
    float: right;
    margin-right: 80px;
  }

  .section-show {
    display: block;
    float: left;
    position: relative;
    height: 380px;
    width: 250px;
  }

  .section-list {
    display: inline-block;
    width: 960px;
    margin-left: 20px;
  }
  .section-list-item {
    float: left;
    margin-bottom: 10px;
  }
</style>
